import { View, Image, Swiper, SwiperItem, RichText } from '@tarojs/components';
import { BaseEventOrig } from '@tarojs/components/types/common';
import { SwiperProps } from '@tarojs/components/types/Swiper';
import HeroType from '../index/components/HeroType';
import { Config } from '../../Config';
import HeroSkillList from './components/HeroSkillList';
import Taro, { useState, useEffect } from '@tarojs/taro';
import { windowWidth, request } from '../../utils';
import { IheroData, IheroDetail } from 'src/interface';
import ActivityIndicator from '../../components/ActivityIndicator';
import rightPNG from '../../../static/right.png';
import closePNG from '../../../static/close.png';
import './heroDetail.scss';

interface IMain {
  hero?: IheroData;
  storageDetail?: IheroDetail;
}
function Main(props: IMain) {
  const { hero, storageDetail } = props;
  const [swiperHeight, setSwiperHeight] = useState<number>();
  const [swiperCurrent, setSwiperCurrent] = useState(0);
  const [heroDetail, setHeroDetail] = useState<IheroDetail | undefined>(storageDetail);
  const [storyVisible, setStoryVisible] = useState<boolean>(false);

  function culSwiperHeight(thiHero?: IheroData) {
    if (thiHero) {
      Taro.getImageInfo({
        src: thiHero.hero_skin[0].img,
        success: (res) => {
          if (res.errMsg === 'getImageInfo:ok') {
            setSwiperHeight((res.height * windowWidth) / res.width);
            console.log({ res }, (res.height * windowWidth) / res.width);
          }
        },
      });
    }
  }
  async function getDetail(thiHero?: IheroData) {
    if (thiHero) {
      const res = await request<IheroDetail>(Config.获取王者荣耀英雄详情, {
        ename: thiHero.ename,
      });
      setHeroDetail(res);

      Taro.setStorage({
        key: `heroDetail${thiHero.ename}`,
        data: res,
      });
    }
  }

  useEffect(() => {
    culSwiperHeight(hero);
    getDetail(hero);
  }, [hero]);

  function handleSwiperChange(event: BaseEventOrig<SwiperProps.onChangeEventDeatil>) {
    setSwiperCurrent(event.detail.current);
  }

  return hero === undefined ? null : (
    <View className="Herodetail">
      {swiperHeight ? (
        <Swiper
          className="Herodetail-Cover"
          style={{
            height: swiperHeight + 'px',
          }}
          onChange={handleSwiperChange}
        >
          {hero.hero_skin.map((skin) => (
            <SwiperItem key={skin.name}>
              <View className="Herodetail-Cover-Skin">
                <Image className="Herodetail-Cover-Skin-Image" src={skin.img} />
                <View className="Herodetail-Cover-Skin-Show">
                  <Image className="Herodetail-Cover-Skin-Show-Image" src={skin.smallSkinImg} />
                  <View className="Herodetail-Cover-Skin-Show-Name">{skin.name}</View>
                </View>
              </View>
            </SwiperItem>
          ))}
        </Swiper>
      ) : (
        <View className="Herodetail-Loading">
          <ActivityIndicator></ActivityIndicator>
        </View>
      )}

      {!storyVisible && (
        <View className="Herodetail-Detail">
          <View className="Herodetail-HeroName-Outer">
            <View className="Herodetail-HeroName">{hero.cname}</View>

            {hero.new_type === 1 && <View className="Herodetail-New">新</View>}
          </View>
          <View className="Herodetail-TypeAndStory">
            <HeroType type={hero.hero_types[0]} />
            <View
              className="Herodetail-TypeAndStory-Story"
              onClick={setStoryVisible.bind(this, true)}
            >
              英雄故事
              <Image className="Herodetail-TypeAndStory-Story-Image" src={rightPNG} />
              {/* <AtIcon value="chevron-right" size="15" color="#fff"></AtIcon> */}
            </View>
          </View>
          {heroDetail ? (
            <HeroSkillList skillList={heroDetail.skillList} />
          ) : (
            <ActivityIndicator></ActivityIndicator>
          )}
        </View>
      )}

      {storyVisible && (
        <View className="Herodetail-Story">
          {/* <AtIcon
            
            value="close-circle"
            size="35"
            color="#fff"
            onClick={setStoryVisible.bind(this, false)}
          ></AtIcon> */}
          <Image
            className="Herodetail-Story-Close"
            src={closePNG}
            onClick={setStoryVisible.bind(this, false)}
          />
          <RichText nodes={heroDetail && heroDetail.story}></RichText>
        </View>
      )}
    </View>
  );
}
export default Main;
